<!DOCTYPE html>
<!--<link th:src="@{/js/leaflet/leaflet.css}" crossorigin="" />
<script th:src="@{/js/leaflet/leaflet.js}" crossorigin=""></script>-->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
      integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
        integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>
<!--<script th:src="@{/js/leaflet/leaflet-heat.js}"></script>-->
<style>
    * {
        margin: 0;
        padding: 0
    }
    #map {
        position: absolute;
        top: 7%;
        bottom: 0;
        left: 0;
        right: 0;
        cursor: pointer;
        z-index: 1;
        width: 80%;
        margin-left: 20%;
    }
    .tl{
        position: absolute;
        width: 200px;
        height: 30px;
        top: 85%;
        left: 24%;
        z-index: 10;

    }
    .gradient-legend {
        height: 20px;
        background: linear-gradient(to right, #0000ff,#1c81e9,#f5db4b,#f3db4b,#df8f24,#d6552f,#ff0000);
        border: 1px solid #000;
        margin-bottom: 10px;
    }
    .box {
        margin-top: -11px;
        float: left;
        width: 20%; /* 每个div占据总宽度的33.33% */
        box-sizing: border-box; /* 包括内边距和边框在内的总宽度 */
    }

    .div-with-line-left {
        position: relative;
        /*background-color: #f0f0f0; *//* 背景色 */
    }

    .div-with-line-left::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0%; /* 线位于div垂直中央 */
        transform: translateY(-77%);
        height: 100%; /* 高度与div相同 */
        width: 1px; /* 线的宽度 */
        background-color: #000; /* 线的颜色 */
    }
    .div-with-line-right {
        position: relative;
        /*background-color: #f0f0f0;*/ /* 背景色 */
    }

    .div-with-line-right::before {
        content: '';
        position: absolute;
        right: 0;
        top: 0%; /* 线位于div垂直中央 */
        transform: translateY(-77%);
        height: 100%; /* 高度与div相同 */
        width: 1px; /* 线的宽度 */
        background-color: #000; /* 线的颜色 */
    }
    .div-with-line-center {
        position: relative;
        /*background-color: #f0f0f0;*/ /* 背景色 */
    }

    .div-with-line-center::before {
        content: '';
        position: absolute;
        right: 50%;
        top: 0%; /* 线位于div垂直中央 */
        transform: translateY(-77%);
        height: 100%; /* 高度与div相同 */
        width: 1px; /* 线的宽度 */
        background-color: #000; /* 线的颜色 */
    }
    .ann1{
        background-color: #1e9fff;
        color: #ffffff;
        border: 0px;
        width: 50px;
        height: 26px;
        border-radius: 20px;
    }
    .ann2{
        background-color: #ff0000;
        color: #ffffff;
        border: 0px;
        width: 50px;
        height: 26px;
        border-radius: 20px;
    }
    .slider-container {
        width: 100%;
    }

    .slider {
        -webkit-appearance: none; /* 移除默认样式 */
        width: 100%; /* 滑块宽度 */
        height: 3px; /* 滑块高度 */
        background: #d3d3d3; /* 滑块背景颜色 */
        outline: none; /* 移除轮廓 */
        opacity: 0.7; /* 设置透明度 */
        -webkit-transition: .2s; /* 过渡效果 */
        transition: opacity .2s;
    }

    .slider:hover {
        opacity: 1; /* 鼠标悬停时增加透明度 */
    }

    .slider::-webkit-slider-thumb {
        -webkit-appearance: none; /* 移除默认样式 */
        appearance: none;
        width: 15px; /* 设置滑块手柄的宽度 */
        height: 15px; /* 设置滑块手柄的高度 */
        border-radius: 15px;
        background: #0044f6; /* 设置滑块手柄的背景颜色 */
        cursor: pointer; /* 设置鼠标指针 */
    }

    .slider::-moz-range-thumb {
        width: 15px; /* Firefox需要单独设置 */
        height: 15px;
        border-radius: 15px;
        background: #0059ff;
        cursor: pointer;
    }
    .el-input__inner {
        box-sizing: border-box;
        color: #606266;
   /*     display: inline-block;*/
        font-size: inherit;
        line-height: 40px;
        transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
    }
    #startButton {
        background-size: 50px;
        width: 50px;
        height: 50px;
        border: 0px;
        background-image: url(/img/tzan.png);
        border-radius: 50px;
    }
    #startButton:hover {
        background-size: 50px;
        width: 50px;
        height: 50px;
        border: 0px;
        background-image: url(/img/tzan1.png);
        border-radius: 50px;
    }

    #pauseButton{
        display: none;
        background-size: 50px;
        width: 50px;
        height: 50px;
        border: 0px;
        background-image: url(/img/bfan.png);
        border-radius: 50px;
    }
    #pauseButton:hover {
        background-size: 50px;
        width: 50px;
        height: 50px;
        border: 0px;
        background-image: url(/img/bfan1.png);
        border-radius: 50px;
    }
    #syz{
        background-repeat: no-repeat; /* 图片平铺 */
        background-position: center center; /* 背景图片居中 */
        background-size: 27px;
        width: 50px;
        height: 50px;
        border: 0px;
        background-image: url(/img/sys.png);
        border-radius: 50px;
    }
    #xyz{
        background-repeat: no-repeat; /* 图片平铺 */
        background-position: center center; /* 背景图片居中 */
        background-size: 27px;
        width: 50px;
        height: 50px;
        border: 0px;
        background-image: url(/img/xys.png);
        border-radius: 50px;
    }
    #syz:hover{
        background-image: url(/img/sys1.png);
    }
    #xyz:hover{
        background-image: url(/img/xys1.png);
    }

</style>
</head>
<body>
<div style="width: 100%;margin-top: 1%;">
    <div>
    <div style="width: 18%;border-radius: 10px; background-color: whitesmoke;margin: 20px;box-shadow: 4px 10px 5px rgb(101 101 101 / 50%);height: 649px;">
        <div style="word-wrap: break-word;white-space: normal;margin: 70px 0px 27px 13px;"> 产品：<i  class="el-input__inner">[[${namep}]]</i></div>
        <div style="word-wrap: break-word;white-space: normal;margin: 40px 0px 27px 13px;"> 文件: <i  class="el-input__inner">[[${fileName}]]</i></div>
        <div style="word-wrap: break-word;white-space: normal;margin: 40px 0px 27px 13px;">元素:<select class="el-input__inner" style="border: 1px solid #ddd;border-radius: 4px;background: transparent;outline: none;height: 30px;width: 74%;" id="mySelect"></select></div>
        <div style="word-wrap: break-word;white-space: normal;margin: 40px 0px 27px 13px;">时间:<select class="el-input__inner" style="border: 1px solid #ddd;border-radius: 4px;background: transparent;outline: none;height: 30px;width: 74%;" id="wd"></select></div>
        <div style="word-wrap: break-word;white-space: normal;margin: 40px 0px 27px 13px;">高度:<select class="el-input__inner" style="border: 1px solid #ddd;border-radius: 4px;background: transparent;outline: none;height: 30px;width: 74%;" id="z"></select></div>
</div>
        <!--   <button id="startButton" class="ann1">开始</button>
    <button id="pauseButton" class="ann2">暂停</button>-->
    </div>
    <div id="num" class="tl">
        <div class="gradient-legend">
            <div  style="font-size: 13px;margin-top: -23px"><text id="tlsx"></text><text id="unit"></text></div>
        </div>
        <div>
            <div id="tl1" class="box div-with-line-left" style="text-align: left;font-size: 9px;"></div>
            <div id="tl2" class="box div-with-line-left" style="text-align: center;font-size: 9px;text-align: left;"></div>
            <div id="tl3" class="box div-with-line-center" style="text-align: center;font-size: 9px;"></div>
            <div id="tl4" class="box div-with-line-right" style="text-align: center;font-size: 9px;text-align: right;"></div>
            <div id="tl5" class="box div-with-line-right" style="text-align: right;font-size: 9px;"></div>
        </div>
    </div>
</div>
<div id="map" >
</div>
<div style="position: absolute; width: 80%; height: 80px; top: 90%; left: 20%; z-index: 10; background-color: #67676773;">
    <div class="slider-container">
        <input type="range" min="0" max="100" value="0" class="slider" id="myRange">
        <span id="sliderValue" style="    font-size: 25px;">0</span>
        <div style="display:flex;margin-top: -1%;">
            <div style="margin-top: -1%; margin-left: 42%;">
                <button id="syz" onclick="syz()"></button>
            </div>
            <div style="    margin-top: -1%; margin-left: 1%;">
                <button id="startButton"></button>
                <button id="pauseButton"></button>
            </div>
            <div style="    margin-top: -1%; margin-left: 1%;">
                <button id="xyz" onclick="xyz()"></button>
            </div>
        </div>
    </div>
</div>
<th:block th:include="include :: footer" />
<script>
    var filePath = "[[${filePath}]]";//文件名称路径
    var qbsj = "[[${qbsj}]]";//起报时间
    var sjjg = "[[${sjjg}]]";//时间间隔
    var cpsjlx = "[[${cpsjlx}]]"//时区 0是世界时 1是北京时
    var isjc = "[[${isjc}]]"//去除数值
    console.log("当前预览文件【"+filePath+"】")
    console.log(qbsj+"七宝时间")
    var path = "E:\\33.nc"
    var datasj = null;//下拉框中的数据范围数据
    var fw  = null; //范围
    var imageOverlay
    var prefix ="/leaflet/map";

    // 初始化计数器
    let currentIndex = 1;
    // 存储setInterval的ID
    let intervalId = null;
    //滑块
   /* document.getElementById("myRange").oninput = function() {
        document.getElementById("sliderValue").innerHTML = this.value;
        imageOverlay.remove();//清空图层
        scpng(path,$('#mySelect').val(),this.value)//地图上叠加图片方法
        $("#wd").val(this.value)
    };*/
    //滑块地图叠加时间滑块展示
 /*   document.getElementById('myRange').addEventListener('input', function(event) {
        console.log('当前值:', event.target.value);
        console.log($('#wd option:selected').text())
        document.getElementById("sliderValue").innerHTML = ""
        document.getElementById("sliderValue").innerHTML = $('#wd option:selected').text(); //this.value;设置时间值
    });*/
    document.getElementById('myRange').addEventListener('change', function(event) {//监听滑块时间调用图片
        imageOverlay.remove();//清空图层
        var max = document.getElementById("myRange").max;
        scpng(path,$('#mySelect').val(),this.value)//地图上叠加图片方法
        $("#wd").val(this.value)
        document.getElementById("sliderValue").innerHTML = ""
        document.getElementById("sliderValue").innerHTML = $('#wd option:selected').text(); //this.value;设置时间值
        currentIndex = max - this.value
    });

    console.log("加载地图先调用接口获取当前下拉框数据和显示范围数据"+filePath)
    $("#pauseButton").css("background-color","#ffffff")
    $.post(prefix + "/getsx",{filePath:filePath}, function (data) {//加载地图先调用接口获取当前下拉框数据和显示范围数据
        $.modal.loading("正在加载，请稍后...");
        if(data.code == 0) {
            console.log(data)
            datasj = data;
            getsx(data.data);//属性下拉框赋值
            getwd($('#mySelect').val(), data.data);//维度下拉框赋值
            console.log(data.data.length)
            getfw($('#mySelect').val(), data.data);//将范围设为全局变量
            scpng(path, $('#mySelect').val(), $('#wd').val())//地图上叠加图片方法
            document.getElementById("sliderValue").innerHTML = $('#wd option:selected').text();
        }else {
            $.modal.closeLoading();
            $.modal.msgWarning(data.msg);
            console.log(data.msg)
        }

    })
        var map = L.map('map', {
            //dragging: false,  // 禁止鼠标拖动
            //touchZoom: false, // 禁止触摸缩放
            //scrollWheelZoom: false, // 禁止滚轮缩放
            zoomControl: false,  //去掉左上角缩放图标
            attributionControl: false,  //去掉右下角的logo
            center: new L.LatLng(25.6586, 90),
            zoom: 3,
        })
        // 添加地图层
        // 使用高德的WMS服务
        var layer = L.tileLayer('http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', {
            subdomains: ['1', '2', '3', '4'],
            minZoom: 1, // 最小放缩级别
            maxZoom: 19 // 最大放缩级别
        });
        map.addLayer(layer);
    $(document).ready(function(){
        $('#mySelect').change(function(){
            // 当选项变化时执行的代码
            //alert('选中的值：' + $(this).val());
            $('#wd').val('');//清空维度下拉框的值
            getwd($(this).val(),datasj.data)
            imageOverlay.remove();//清空图层
            scpng(path,$('#mySelect').val(),0)//地图上叠加图片方法
        });
        $('#wd').change(function(){
            $.modal.loading("正在加载，请稍后...");
            // 当选项变化时执行的代码
            //alert('选中的值：' + $(this).val());
            imageOverlay.remove();//清空图层
            scpng(path,$('#mySelect').val(),$('#wd').val())//地图上叠加图片方法
            document.getElementById("myRange").value = Number($('#wd').val())
            document.getElementById("sliderValue").innerHTML = $('#wd option:selected').text();

        });
    });

    /**
     * 上一张
     */
    function syz(){
        // 禁用按钮
        $("#syz").prop('disabled', true);
        // 2秒后重新启用按钮
        setTimeout(function() {
            $('#syz').prop('disabled', false);
        }, 500); // 2000毫秒 = 2秒
        imageOverlay.remove();//清空图层
        var max = document.getElementById("myRange").max;
        console.log("传入参数第几张图片"+Number($('#myRange').val()))
        if($('#myRange').val()-1 >= 0){
            document.getElementById("myRange").value = Number($('#myRange').val())-1
            scpng(path,$('#mySelect').val(),Number($('#myRange').val())-1)//地图上叠加图片方法
            console.log("维度值"+$('#wd').val())
            console.log(max-Number($('#wd').val())+1)
            document.getElementById("wd").options[max-Number($('#wd').val())+1].selected = true;
            document.getElementById("sliderValue").innerHTML = $('#wd option:selected').text();
        }else{
            scpng(path,$('#mySelect').val(),0)//地图上叠加图片方法
        }
    }

    /**
     * 下一张
     */
    function xyz(){
        // 禁用按钮
        $("#xyz").prop('disabled', true);
        // 2秒后重新启用按钮
        setTimeout(function() {
            $('#xyz').prop('disabled', false);
        }, 500); // 2000毫秒 = 2秒

        imageOverlay.remove();//清空图层
       var max = document.getElementById("myRange").max;
        console.log("传入参数第几张图片"+Number($('#myRange').val()))
        if($('#myRange').val()-1 <= max){
            document.getElementById("myRange").value = Number($('#myRange').val())+1
            scpng(path,$('#mySelect').val(),Number($('#myRange').val())+1)//地图上叠加图片方法
            console.log("维度值"+$('#wd').val())
            console.log(max-Number($('#wd').val())-1)
            document.getElementById("wd").options[max-Number($('#wd').val())-1].selected = true;
            document.getElementById("sliderValue").innerHTML = $('#wd option:selected').text();
        }else{
            scpng(path,$('#mySelect').val(),max)//地图上叠加图片方法
        }

    }
    /**
     * 下拉框属性信息
     * @param data
     */
    function getsx(data){
    for (let i = 0; i <data.length; i++) {
        var option=document.createElement("option");
        //转换DOM对象为JQ对象,好用JQ里面提供的方法 给option的value赋值
        $(option).val(data[i].data.name);
        //给option的text赋值,这就是你点开下拉框能够看到的东西
        $(option).text(data[i].data.name);
        //获取select 下拉框对象,并将option添加进select
        $('#mySelect').append(option);
    }
}
    /**
     * 维度信息
     * @param data
     */
    function getwd(select,data){
        var kssj =qbsj;
        for (let i = 0; i <data.length; i++) {
            if(data[i].data.name == select){//如果是选中的值就把维度信息放到下拉框中
                console.log(data[i].data.wd)
                document.getElementById("myRange").max = data[i].data.wd.length-1;
                for (let j = 0; j < data[i].data.wd.length; j++) {
                    //console.log(data[i].data.wd[j])
                    /*$("#wd").prepend('<option value="'+j+'">'+data[i].data.wd[j]+'</option>');*/
                        $("#wd").prepend('<option value="'+j+'">'+kssj+'</option>');
                        kssj = addHoursToDate(kssj, sjjg)
                    currentIndex = data[i].data.wd.length-1
                }
            }
        }
    }

    /**
     * 预览图片
     * @param path
     */
    function addmap(path){
        $("#tlsx").text($("#mySelect").val());//图例
        /*var imageUrl =
            "https://maps.lib.utexas.edu/maps/historical/newark_nj_1922.jpg";*/
          //var imageUrl ="http://localhost:9001/cloud/"+path;

        console.log("预览地址:http://"+window.location.hostname+":"+window.location.port+"/cloudyl/"+path)
        var imageUrl ="http://"+window.location.hostname+":"+window.location.port+"/cloudyl/"+path;
        var errorOverlayUrl = "https://cdn-icons-png.flaticon.com/512/110/110686.png";
        console.log(fw)
        var latLngBounds = L.latLngBounds(fw);
        imageOverlay = L.imageOverlay(imageUrl, latLngBounds, {
            opacity: 0.8, //opacity定义图像叠加的不透明度，默认等于1.0 。减小此值可使图像叠加层透明并显示基础地图图层。
            errorOverlayUrl: errorOverlayUrl, //errorOverlayUrl是覆盖图像的 URL，用于代替加载失败的覆盖。
            //interactive: true, //interactive默认为false|true。如果 ，图像叠加将在单击或悬停时发出鼠标事件。
        }).addTo(map);
        var center = imageOverlay.getBounds().getCenter();
        map.panTo(center);
        $.modal.closeLoading();
        // 如果要查看 ImageOverlay 覆盖的区域，可以将具有相同内容的 L.Rectangle 添加到地图中：L.LatLngBounds
        //L.rectangle(latLngBounds).addTo(map);
        //map.fitBounds(latLngBounds);

    }

    /**
     * 显示图例数值
     * @param data
     * @constructor
     */
    function LegendNum(data){
        console.log(data[0])
        console.log(data[1])
        console.log(data[2])
        console.log(data[3])
        console.log(data[4])
        $("#tl1").text(data[0].toFixed(2))
        $("#tl2").text(data[1].toFixed(2))
        $("#tl3").text(data[2].toFixed(2))
        $("#tl4").text(data[3].toFixed(2))
        $("#tl5").text(data[4].toFixed(2))
    }
    /**
     * 生成图片
     */
    function scpng(path,sx,wd){
        $.post(prefix + "/getmappng",{path:filePath,sx:sx,wd:wd,notCounting:isjc}, function (data) {
            //if(data.code == 200){
                console.log(data.msg)
                $("#unit").text("("+data.data.unit+")")
                    $("#z").empty();//清空下拉框
                    if(data.data.z != null){
                        $("#z").prepend('<option value="'+data.data.z+'">'+data.data.z+'</option>');
                    }else{
                        $("#z").prepend('<option value="'+0+'">'+"无"+'</option>');
                    }
                addmap(data.msg);//调用初始地图
                LegendNum(data.data.colors)
        })
    }

    /**
     * 获取范围
     * @param select
     * @param data
     */
    function  getfw(select,data){
        for (let i = 0; i <data.length; i++) {
            if(data[i].data.name == select){//如果是选中的值就把维度信息放到下拉框中
                console.log(data[i].data.fw)
                fw = data[i].data.fw;
            }
        }
    }

    // 定义一个函数，用于将时间字符串转为Date对象，并增加指定的小时数
    function addHoursToDate(timeString, hoursToAdd) {
        // 原始时间字符串
        // 将字符串解析为 Date 对象
        // 注意：在大多数现代浏览器中，直接使用 new Date(timeString) 就可以解析这种格式
        var date = new Date(timeString);

        // 检查解析是否成功（可选步骤，但推荐）
        if (isNaN(date.getTime())) {
            console.error("无法解析日期字符串");
        } else {
            // 给日期对象加上五个小时
            date.setHours(date.getHours() + Number(hoursToAdd));

            // 格式化 Date 对象为 yyyy-MM-dd HH:mm:ss 字符串
            var formattedDate = date.getFullYear() + '-' +
                ('0' + (date.getMonth() + 1)).slice(-2) + '-' +
                ('0' + date.getDate()).slice(-2) + ' ' +
                ('0' + date.getHours()).slice(-2) + ':' +
                ('0' + date.getMinutes()).slice(-2) + ':' +
                ('0' + date.getSeconds()).slice(-2);

            // 输出新的时间字符串
            //console.log(formattedDate);
            return formattedDate;
        }
    }
    // 获取下拉框元素和按钮元素
    const selectElement = document.getElementById('wd');
    const startButton = document.getElementById('startButton');
    const pauseButton = document.getElementById('pauseButton');

    // 定义一个函数，用于循环选中下拉框的下一个选项
    function cycleSelectOptions() {
        var max = document.getElementById("myRange").max;
        console.log("ddddd")
        const optionsLength = selectElement.options.length;
        selectElement.options[currentIndex].selected = true;
        imageOverlay.remove();//清空图层
        scpng(path,$('#mySelect').val(),$('#wd').val())//地图上叠加图片方法
        currentIndex = (currentIndex - 1) % optionsLength;
        console.log(currentIndex)

        document.getElementById("sliderValue").innerHTML = $('#wd option:selected').text();//每次执行都获取新时间
        document.getElementById("myRange").value = $('#wd option:selected').val()
        if($('#wd option:selected').val() === max){
            selectElement.options[0].selected = true;
            //document.getElementById("myRange").value = 0
            document.getElementById("wd").options[max].selected = true;
            document.getElementById("sliderValue").innerHTML = $('#wd option:selected').text();//每次执行都获取新时间
            document.getElementById("myRange").value = 0
            pauseCycling();
        }
    }

    // 开始循环的函数
    function startCycling() {
        console.log(intervalId)
        if (intervalId === null) {
            $("#xyz").prop('disabled', true);
            $("#syz").prop('disabled', true);
            $("#startButton").css("display","none")
            $("#pauseButton").css("display","block")
            intervalId = setInterval(cycleSelectOptions, 1000);
        }
    }

    // 暂停循环的函数
    function pauseCycling() {
        console.log(intervalId)
        if (intervalId !== null) {
            $("#xyz").prop('disabled', false);
            $("#syz").prop('disabled', false);
            $("#startButton").css("display","block")
            $("#pauseButton").css("display","none")
            clearInterval(intervalId);
            intervalId = null;
            document.getElementById("sliderValue").innerHTML = $('#wd option:selected').text();
        }
    }

    // 为按钮添加事件监听器
    startButton.addEventListener('click', startCycling);
    pauseButton.addEventListener('click', pauseCycling);

    // 页面加载时可以先开始循环（可选）
     //startCycling();
</script>
</body>
</html>
